<template>
    <section class="IndexManage" v-loading="IndexLoading">
        <div class="towMake">
            <div class="titleReleave">
                <span>镇级确认情况</span>
            </div>
        </div>
        <div v-if="hasTask" style="width: 750px;margin: 35px auto 0 auto">
            <div  v-for="(item, index) in trackList" :style="generateReviewContentStatus(item)"  :key="index" :class="`task_item`">
                <div class="detail" style="position: relative">
                    <el-image v-if="item.status==='0'" src="../../static/img/csj/unconfirmed.png" style="position: absolute;top: -1px;right: 0"></el-image>
                    <el-image v-else src="../../static/img/csj/confirmed.png" style="position: absolute;top: -1px;right: 0"></el-image>
                    <!-- <el-image v-if="item.status==='2'" src="../../static/img/csj/tg.png" style="position: absolute;top: -1px;right: 0"></el-image>
                    <el-image v-if="item.status==='3'" src="../../static/img/csj/qr.png" style="position: absolute;top: -1px;right: 0"></el-image> -->
                    <el-col class="image_box" :span="2">
                        <img class="image" src="../../static/img/party-logo.png" alt="">
                    </el-col>
                    <el-col :span="5" v-show="item.objectName" style="text-align: left">
                        <span style="color:#F84A4A;font-weight: 700;">{{item.objectName}}</span>
                    </el-col>
                    <!-- <el-col :span="5" style="text-align: left">
                        <span class="detailLabel">任务年份:</span>
                        <span>{{item.taskYear ? item.taskYear+'年' : item.taskYear}}</span>
                    </el-col> -->
                    <el-col :span="16" style="text-align: left;">
                        <span class="detailLabel" style="font-weight: 700;">确认意见:</span>
                        <el-tooltip popper-class="review_tooltip" placement="right-start" effect="light" v-if="item.note&&item.note.length>25">
                            <div slot="content" >{{item.note}}</div>
                            <span>{{item.note.substring(0,25)}}...</span>
                        </el-tooltip>
                        <span v-else>{{item.note}}</span>
                    </el-col>
                    <!-- <el-col :span="4">
                        <span class="detailLabel">截止日期:</span>
                        <span>{{item.endTime}}</span>
                    </el-col>
                    <el-col :span="5">
                        <span class="detailLabel">任务内容:</span>
                        <span>{{item.taskName || item.name}}</span>
                    </el-col> -->
                </div>
            </div>
        </div>
        <div v-else class="no_task">
            <img src="../../static/village/no-execute-data.png" alt="">
        </div>
    </section>
</template>

<script>
    export default {
        name: "IndexManage",
        data(){
            return{
                IndexLoading:false,
                hasTask:false,
                trackList:[],
            }
        },
        props: {
            currentYear: {
                type: String
            },
            isTask: {
                type: Boolean
            },
        },
        methods:{
            checkIsHasTask (year) {
                this.IndexLoading=true;
                this.$http("POST", `/identity/cadreTask/getCurrentTask/考核指标内容制定?year=${year}`, {}, false).then(
                    data => {
                        this.IndexLoading=false;
                        if (data) {
                            this.hasTask = true;
                            this.trackInfo(data);
                        }else {
                            this.hasTask = false;
                        }
                    }
                )
            },
            trackInfo(item){
                IndexLoading:true;
                this.$http('GET',`identity/cadreTask/${item.id}taskId`,false).then(data=>{
                    this.IndexLoading=false;
                    this.trackList = data;  
                });
            },
            generateReviewContentStatus(item) {
                let style = {
                    'line-height': '50px'
                };
                if (item.status === '0') {
                    style.border = '1px solid #C5C5C5';
                } else  {
                    style.border = '1px solid #55BD94';
                // } else if (item.status === '2') {
                //     style.border = '1px solid #55BD94';
                // } else if (item.status === '3') {
                //     style.border = '1px solid #409EFF';
                }
                return style;
            },
        },
        watch:{
            'currentYear':{
                handler:function (newYear,oldYear) {
                    this.checkIsHasTask(newYear)
                }
            },
            'isTask':{
                handler:function (newTask,oldTask) {
                    this.checkIsHasTask(this.currentYear)
                }
            }
        },
        mounted(){
            this.checkIsHasTask(this.currentYear)
        }
    }
</script>

<style scoped>
    .IndexManage {
        overflow: hidden;
        font-family:Source Han Sans CN!important;
        font-size: 16px;
    }
    .IndexManage .task_item {
        display: flex;
        margin: 15px 0;
        height: 50px;
        line-height: 50px;
        border-radius: 5px;
        background-color: #fff;
        box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
        cursor: pointer;
        transition: all .4s;
    }
    .IndexManage .task_item:hover {
        transform: translateY(-3px) scale3d(1.01,1.01,1.01);
        background-color: #a6eaf538;
        cursor: pointer;
    }
    .IndexManage  .active_index {
        background-color: #a6eaf538;
    }
    .image_box {
        text-align: center;
        line-height: 56px;
    }
    .detail {
        flex: 1;
        text-align: center;
    }
    /* .detail span {
        font-weight: 700;
    } */
    .detail .el-col span:nth-child(1) {
        font-weight: normal;
    }
    .no_task {
        width: 100%;
        text-align: center;
        margin: 60px auto 0 auto;
    }

    .el-pagination {
        margin-top: 10px;
        float: right;
        margin-right: 3px;
    }
    .towMake{
        margin-top: 30px;
        border-bottom: 2px solid #D7F4E9;
        height: 35px;
        width: 100%;
    }
    .titleReleave{
        text-align: left;
        border-left: 4px solid #55BD94;
        font-size: 18px;
        font-weight: bold;
    }
    .titleReleave span{
        color: #303030;
        font-weight:bold;
        font-size:20px;
        padding-left: 10px;
    }
</style>
<style>
    .detail .el-col-4 {
        text-align: center;
    }
    .review_tooltip {
      max-width: 200px;
      font-size: 14px;
      line-height: 1.5;
      letter-spacing: 2px;
      text-indent: 2em;
    }
</style>
